<script setup>
import store from "../store";
import UploadPic from "./UploadPic.vue";
import { ElMessage, ElButton } from "element-plus";
import { ElPopconfirm } from "element-plus";
import axios from "axios";
store.getPosts();
store.getstu();
store.getsoldier();
store.getorg();
var SkipToDetail=function(msg){
  var info='';
  axios("http://8.130.46.21:8000/profile/info/?schNo="+msg).then((res)=>{
    info=res.data
  window.localStorage.setItem("getmsg",JSON.stringify(info))
  window.location.replace("../detail-person/detail-person.html")
  });
console.log(info)
  // window.localStorage.setItem("getmsg",info)
}
</script>

<script>
export default {
  props: {
    select:Array,
  },
  inject: ["reload"],
  //引入强制刷新
  data() {
    return {
      PostString: "#post",
      PostStringID: "post",
      PostThumb: 0,
      PostTheme: "",
      PostBulk: "",
      PostReply: "",
      PostNum: 0,
      UserSchNo:"",
      PostPicUrl: "defaultpostpic",
      ReplyPicUrl: "defaultreplypic",
      selectID:this.select,
      //以上为post初始化的内容
      active: true,
    };
  },
  //正式使用时，应把注释去掉
  created() {
    var userJson=window.localStorage.getItem("user")  
    var User=JSON.parse(userJson)
    this.UserSchNo=User.schNo+""
    if (window.localStorage.getItem("thumbArray")==null) {
      var thumbActive={
      Active:[],
    }
    window.localStorage.setItem("thumbArray",JSON.stringify(thumbActive))
    }
    //点赞数组
  },
  methods: {
    countPostNumber(array) {
      this.PostNum = array.length;
    },
    //返回帖子数量
    searchBySchNo(schNo, type) {
      for (let index = 0; index < store.state.Student.length; index++) {
        if (schNo === store.state.Student[index].sch_No) {
          switch (type) {
            case "profile":
              return store.state.Student[index].profile;
            case "nick":
              return store.state.Student[index].nick;
            default:
              break;
          }
        }
      }
      for (let index = 0; index < store.state.Soldier.length; index++) {
        if (schNo === store.state.Soldier[index].sch_No) {
          switch (type) {
            case "profile":
              return store.state.Soldier[index].profile;
            case "nick":
              return store.state.Soldier[index].nick;
            default:
              break;
          }
        }
      }
    },
    //根据学号搜索信息
    sendPost() {
      if (this.PostTheme.length === 0 || this.PostBulk.length === 0) {
        ElMessage({
          message: "主题和内容不能为空",
          type: "warning",
        });
        return;
      }
      var post = new FormData();
      post.append("theme",this.PostTheme);
      post.append("bulk",this.PostBulk);
      post.append("schNo",this.UserSchNo);
      post.append("thumb",0);
      post.append("pic",this.PostPicUrl);
      post.append("timeStamp",Date.now() + '');
      post.append("reply",[]);
      this.PostNum += 1;
      store.postPosts(post);
      setTimeout(() => {
        this.reload();
      }, 1000);
    },
    //发送帖子
    deletePost(id) {
      
      this.PostNum -= 1;
      store.deletePost(id);
      setTimeout(() => {
        this.reload();
      }, 1000);
    },
    //删除帖子
    addThumbs(num, id) {
      var jsonArray=JSON.parse(window.localStorage.getItem('thumbArray'));
      var index = jsonArray.Active.indexOf(id);
      this.PostThumb = num;
      if (this.IsThumbed(id)) {
        this.PostThumb += 1;
        jsonArray.Active.push(id);
      } else {
        this.PostThumb -= 1;
        jsonArray.Active.splice(index,1);
      }
      window.localStorage.setItem("thumbArray",JSON.stringify(jsonArray));
      store.patchThumbs(this.PostThumb, id);
      setTimeout(() => {
        this.reload();
      }, 50);
      
    },
    //点赞
    commentReply(text, id) {
      var reply=new FormData();
      reply.append('schNo',this.UserSchNo);
      reply.append('bulk',text);
      reply.append('pic',this.ReplyPicUrl);
      reply.append('timeStamp',Date.now()+'');
      reply.append('id',id);
      store.patchReplys(reply, id);
      setTimeout(() => {
        this.reload()
      }, 1000);
      
    },
    //评论
    deleteReply(postID, replyID) {
      var reply = store.state.Posts[postID - 1].reply;
      reply.splice(replyID - 1, 1);
      store.patchReplys(reply, postID);
    },
    //删除评论(或废弃？)
    IsThumbed(id) {
      var jsonArray=JSON.parse(window.localStorage.getItem('thumbArray'));
      if (jsonArray.Active.indexOf(id) === -1) {
        return true;
      } else {
        return false;
      }
    },
    //判断是否点赞
    IsBelongedToUser(schNo) {
      if (this.UserSchNo === schNo) return true;
      else return false;
    },
    //是否判断帖子是否属于当前用户
    IsSelected(id) {
      if (this.select.length === 0 || this.select.indexOf(id) != -1) return true;
      else return false;
    },
    //判断是否被筛选
    IsPicExist(pic_url){
      if(pic_url=="defaultpostpic"||pic_url=="defaultreplypic"){
        return false;
      }
      else{
        return true;
      }
    }
  },
};
</script>

<template>
  <div class="posts">
    <div>
      {{ countPostNumber(store.state.Posts) }}
    </div>
    <!-- <div class="tip" v-if="this.selectID[0] == 'NotFound'">无搜索结果</div> -->
    <div class="post" v-for="item in store.state.Posts" key="item">
      <div class="post-stu" v-if="IsSelected(item.id)">
        <div class="stu-pic" @click="SkipToDetail(item.schNo)">
          <img class="stu-pic" :src="searchBySchNo(item.schNo, 'profile')" alt />
        </div>
      </div>
      <div class="post-main" v-if="IsSelected(item.id)">
        <div class="post-up">
          <div class="theme">
            {{ item.theme }}
          </div>
     <div v-if="IsBelongedToUser(item.schNo)" class="post-delete">            <el-popconfirm
              width="170"
              confirm-button-text="确定"
              cancel-button-text="取消"
              title="您确定要删除该帖?"
              @confirm="deletePost(item.id)"
            >
              <template #reference>
                <el-button class="delete" ></el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>

        <hr />
        <div class="bulk" id="post-bulk">
          {{ item.bulk }}
        </div>
        <div class="pic">
          <img v-if="IsPicExist(item.pic)" :src="item.pic" />
        </div>
        <div class="function">
          <div class="thumb" @click="addThumbs(item.thumb, item.id)">
            <button class="thumb-before" type="button" v-if="IsThumbed(item.id)"></button>
            <button class="thumb-after" type="button" v-else></button>
            <span class="thumb-num">{{ item.thumb }}</span>
          </div>
          <button
            class="reply"
            type="button"
            data-bs-toggle="modal"
            :data-bs-target="PostString + item.id"
          ></button>
          <div
            class="modal fade"
            :id="PostStringID + item.id"
            tabindex="-1"
            aria-labelledby="exampleModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h1 class="modal-title fs-5" id="examplemodalLabel">帖子详情</h1>
                  <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                  ></button>
                </div>
                <div class="modal-body">
                  <div class="reply-theme">
                    {{ item.theme }}
                  </div>
                  <hr />
                  <div class="bulk">
                    {{ item.bulk }}
                  </div>
                  <div class="pic">
                    <img v-if="IsPicExist(item.pic)" :src="item.pic" />
                  </div>
                  <hr />
                  <h2>评论区</h2>
                  <div class="post-reply" v-for="reply in item.reply">
                    <div class="reply-stu" >
                      <img
                        class="stu-pic"
                        :src="searchBySchNo(reply.schNo, 'profile')"
                        alt
                        @click="SkipToDetail(reply.schNo)"
                      />
                    </div>
                    <div class="reply-main">
                      <div class="reply-up">
                        <div class="theme">
                          {{ searchBySchNo(reply.schNo, "nick") }}
                        </div>
                        <div class="reply-delete" v-if="false">
                          <button
                            type="button"
                            class="delete"
                            @click="deleteReply(item.id, reply.id)"
                          ></button>
                        </div>
                      </div>
                      <div class="bulk" id="reply-bulk">
                        {{ reply.bulk }}
                      </div>
                      <div class="pic">
                        <img v-if="IsPicExist(reply.pic)" :src="reply.pic" />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="footer">
                  <textarea
                    class="post-reply-text"
                    placeholder="请输入您的评论"
                    v-model="PostReply"
                  ></textarea>
                  <div class="reply-footer">
                    <UploadPic
                      @submit-pic="(pic_url) => (ReplyPicUrl = pic_url)"
                    ></UploadPic>
                    <button
                      type="button"
                      class="btn btn-primary"
                      data-bs-dismiss="modal"
                      @click="commentReply(PostReply, item.id)"
                    >
                      评论
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button
      type="button"
      class="btn btn-primary"
      id="createPost"
      data-bs-toggle="modal"
      data-bs-target="#exampleModal1"
    ></button>
    <div
      class="modal fade"
      id="exampleModal1"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="examplemodalLabel">发布帖子</h1>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <textarea
              class="post-theme"
              placeholder="请输入您想输入的标题"
              v-model="PostTheme"
            ></textarea>
            <textarea
              class="post-bulk"
              placeholder="请输入您想输入的内容"
              v-model="PostBulk"
            ></textarea>
            <UploadPic @submit-pic="(pic_url) => (PostPicUrl = pic_url)"></UploadPic>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
              关闭
            </button>
            <button
              type="button"
              class="btn btn-primary tijiao"
              data-bs-dismiss="modal"
              @click="sendPost()"
            >
              提交
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.posts {
  overflow: scroll;
  border: none;
  /* background:url(../assets/postBgcolor.jpg); */
  background-color: #fbfbfb;
  margin-top: -15px;
  padding: 0px;
}

#createPost {
  position: fixed;
  top: 90%;
  left: 80%;
  border: 0px;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background: url(../assets/发布.png);
  background-color: #cdc7fe;
  background-size: 90% 90%;
  background-position: center;
  padding: 10px;
  box-shadow: 0 0 4px rgb(81, 98, 251);
}

.post {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  /* padding-top: 25px; */
}

.tip {
  width: 100%;
  color: grey;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 30px;
}
.post-main {
  margin-top: 8px;
  margin-left: 2px;
  margin-bottom: 2px;
  margin-right: 2px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 0px;
  border-radius: 5px;
  width: 86.1%;
  height: auto;
  position: relative;
  background-color: aliceblue;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 0 5px rgb(189, 195, 195);
}

.post-up {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.delete {
  height: 20px;
  width: 20px;
  background: url(../assets/delete.png);
  background-size: 100% 100%;
  border-radius: 100%;
  border: none;
}

.post-stu {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px;
}

.stu-pic {
  height: 40px;
  width: 40px;
  background-color: azure;
  background-size: 100% 100%;
  border-radius: 100%;
  border: none;
  border-width: 1px;
}
.theme {
  font-size: 20px;
  font-weight: bold;
}

.bulk {
  font-size: 15px;
}

.reply-main {
  margin: 2px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 0px;
  border-radius: 5px;
  width: 100%;
  height: auto;
  position: relative;
  background-color: aliceblue;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 0 5px rgb(189, 195, 195);
}

.reply-up {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.reply-stu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px;
}
.reply-stu-pic {
  height: 40px;
  width: 40px;
  background-color: azure;
  background-size: 100% 100%;
  border-radius: 100%;
  border: crimson solid;
  border-width: 1px;
}
.reply-theme {
  font-size: 25px;
  font-weight: bold;
}

#post-bulk {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.post-reply {
  font-size: 15px;
  display: flex;
  flex-direction: row;
  overflow: scroll;
  margin: 3px;
}
.pic {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.pic > img {
  width: 100%;
  height: auto;
}
.function {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

/* .thumb-enter-active,
.thumb-leave-active{
    transition: opacity 0.5s ease;
}
.thumb-enter-from,
.thumb-leave-to{
    opacity: 0;
} */

.thumb {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.thumb-num {
  font-size: 15px;
  color: grey;
  font-weight: 500;
  line-height: 25px;
  margin-left: 5px;
}
.thumb-before {
  height: 25px;
  width: 25px;
  background: url(../assets/thumbbefore.png);
  background-size: 100% 100%;
  border: none;
  margin-bottom: 10px;
}

.thumb-after {
  height: 25px;
  width: 25px;
  background: url(../assets/thumbafter.png);
  background-size: 100% 100%;
  border: none;
  margin-bottom: 10px;
}
.reply {
  height: 20px;
  width: 20px;
  background: url(../assets/reply.png);
  background-size: 100% 100%;
  border: none;
  margin-bottom: 6px;
}

.post-theme {
  width: 100%;
  border: 0px;
  border-radius: 5px;
  padding: 5px;
  background-color: rgb(249, 248, 248);
}

.post-bulk {
  width: 100%;
  height: 100px;
  border: 0px;
  border-radius: 5px;
  padding: 5px;
  background-color: rgb(249, 248, 248);
}
.post-pic {
  background: url(../assets/addPic.png);
  background-size: 100% 100%;
  height: 20px;
  width: 20px;
  border: none;
}

.post-reply-text {
  width: 100%;
  border: solid;
  border-radius: 5px;
  padding: 2px;
}

.footer {
  margin-left: 17px;
  margin-right: 17px;
}
.reply-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.btn-primary {
  margin-bottom: 10px !important;
}
.btn-secondary{
  margin-bottom: 10px;
}
</style>
